{extend name="layout/layout" /}

{block name="style"}
	<style>
		.verified{
			margin-bottom: 48px;
		}

		.mui-input-row label{
			width: 20%;
			text-align: center;
		}

		.mui-input-row label~input{
			width: 80%;
			font-size: 14px;
		}

		.mui-input-group .mui-input-row:after{
			left: 0;
		}

		.submit-btn{
			height: 45px;
			line-height: 45px;
			position: fixed;
			bottom: 0;
			left: 0;
			width:100%;
			background: #e60012;
			color:#ffff;
			text-align: center;
		}

		.imgs{
			background: #fff;
		}

		.imgs .title{
			line-height: 40px;
			padding: 0 10px;
			border-bottom: 1px solid #eee;
		}

		.img-box{
		}

		.img-box .img-item{
			padding: 20px 50px;
			border-bottom: 1px solid #eee;
		}

		.img-box .img{
			text-align: center;
			margin-bottom: 5px;
		}

		.verified-status{
			background: #fff;
		}
		.verified-status .title{
			border-bottom: 1px solid #eee;
		}

		.verified-status >div{
			line-height: 45px;
			padding: 0 10px;
		}

	</style>
{/block}


{block name="main"}

<div class="verified" v-cloak>
    <form class="mui-input-group" v-if="userInfo.card_status == 0">
    	<div id="up"></div>
		<div class="mui-input-row">
			<label><i class="mui-icon iconfont icon-weibiaoti2fuzhi12"></i></label>
			<input type="text" name="true_name" v-model="true_name" class="mui-input-clear" placeholder="请填写真实姓名">
		</div>

		<div class="mui-input-row">
			<label><i class="mui-icon iconfont icon-yanzhengma"></i></label>
			<input type="text" name="idcard" v-model="idcard" class="mui-input-clear" maxlength="18" placeholder="请填写身份证号码">
		</div>

		<div class="imgs text-md">
            <div class="title text-danger">上传照片</div>
            <div class="img-box  mui-text-center">
                <div class="img-item" v-for="item, index in imgs" @tap="uploadImg(index)">
                    <div class="img">
                        <img :src="item.img_url" class="img-responsive">
                    </div>
                    <div class="img-name">{{item.name}}</div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="submit-btn" @tap="submitApply()">提交认证</div>

	</form>

	<div class="verified-status" v-else>
		<div class="title mui-text-center text-danger" v-if="userInfo.card_status == 1">实名认证审核中</div>
		<div class="title mui-text-center text-danger" v-else-if="userInfo.card_status == 2">实名认证已通过</div>
		<div class="title mui-text-center text-danger" v-else-if="userInfo.card_status == 3">实名认证审核失败</div>
		<div class="name"><span class="text-gray">真实姓名</span> {{userInfo.true_name}}</div>
		<div class="card-no"><span class="text-gray">身份证号</span> {{userInfo.card_no}}</div>
		<div class="remark" v-if="userInfo.verified_remark && userInfo.card_status == 3"><span class="text-gray">失败原因</span> {{userInfo.verified_remark}}</div>

		<div class="btn" v-if="userInfo.card_status == 3">
			<div class="submit-btn" @tap="userInfo.card_status = 0">重新申请</div>
		</div>
	</div>

</div>
{/block}


{block name="script"}
	<script src="/assets/js/Huploadify/jquery.Huploadify.js"></script>
	<script>
		var verified = new Vue({
			el: '.verified',
			data: {
				userInfo: '',
				true_name: '',
				idcard: '',
			    imgs: [
			      {
			        name: '上传身份证正面照片',
			        img_url: '/assets/img/front_face.png',
			        upload: false,
			      },
			      {
			        name: '上传身份证反面照片',
			        img_url: '/assets/img/back_face.png',
			        upload: false,
			      },
			      {
			        name: '上传手持身份证正面照片',
			        img_url: '/assets/img/handheld.png',
			        upload: false,
			      },
			    ],
			    showdiv: false,
		  	},
		  	mounted: function(){
		  		this.getUserInfo();
		  	},
		  	methods: {
		  		//获取用户信息
				getUserInfo: function(){
					layer.open({
						type:2,
						shadeClose:false,
						shade: 'background-color: rgba(0,0,0,.3)',
					});
					var url =  'user/index';
					var that = this;
					request(that, {'url': url}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							that.userInfo = res.data.userInfo;
						} else {
							mui.toast(res.msg);
						}	
					});
				},
		  		//上传图片
				uploadImg: function(index) {
					this.img_index = index;
					document.getElementById('file_upload_1-button').click();
				},
			    //提交认证
				submitApply: function(e){

				    if(!this.true_name){
				      mui.toast('请填写真实姓名');return;
				    }


				    if(!this.idcard){
				      mui.toast('请填写身份证号码');return;
				    }

				    var preg = /(^\d{15}$)|(^\d{17}(x|X|\d)$)/;
				    if(!preg.test(this.idcard)){
				      mui.toast('身份证号码格式不正确');return;
				    }

				    var imgs = this.imgs;
				    var images = [];
				    imgs.forEach(function(item){
				      if(item.upload == false){
				        mui.toast('请'+item.name);return;
				      } else {
				        images.push(item.img_url);
				      }
				    });

				    console.log(images);
				    var that = this;
				    if(images.length == 3){
				      var images = images.join(',');
				      this.images = images;
				      layer.open({
							type:2,
							shadeClose: false
						});

				      postData = {
				      	true_name: that.true_name,
				      	idcard: that.idcard,
				      	images: images,
				      }
				      request(that, {'url': 'user/authentication', 'data': postData}, function(res){
				      	mui.toast(res.msg);
				      	if(res.code == 200) {
					      	location.href = '/my/index'	
				      	} else {
					      	layer.closeAll();
				      	}
				      })
				    }

				}
		  	}
		});

		//上传图片
	    $('#up').Huploadify({
	        auto:true,
	        fileTypeExts:'*.jpg;*.png;*.jpeg;*.JPG;*.JPEG;*.PNG',
	        multi:true,//能多图片上传
	        this:{ 'dirname':'applyInsure', 'name' : 'file'},
	        fileSizeLimit:10240,//限制10M
	        fileObjName : 'file',
	        method:'post',
	        buttonText :'<div class="upload-div"><img src="/assets/img/upload_img.png" class="upload-img" alt=""><p>上传图片</p></div>',
	        showUploadedPercent:true,//是否实时显示上传的百分比，如20%
	        showUploadedSize:true,
	        removeTimeout:3,//进度条消失时间
	        uploader:"{:url('api/ajax/upload')}",
	        onUploadStart:function(){
	            //alert('开始上传');

	        },
	        onInit:function(){
	            //alert('初始化');
	        },
	        //上传成功
	        onUploadSuccess: function(file, data, response) {
	            var res = JSON.parse(data);

	            if(res.code == 200){
	                var index = verified.img_index;
	            	verified.imgs[index]['img_url'] = res.data.url;
	            	verified.imgs[index]['upload'] = true;
	            }else{
	            	mui.alert(res.msg);
	            }
	        },
	        //删除图片
	        onDelete:function(file){
	            console.log('删除的文件：'+file);
	            console.log(file);
	        }
	    });

	</script>
{/block}
{block name="navbar"}{/block}
